import React from 'react'
import { ListItem, ListInfo, LoadMore } from '../style'
import { connect } from 'react-redux'
import { actionCreators } from '../store'
import { Link } from 'react-router-dom'

class List extends React.PureComponent {
  render() {
    const { list, page, getMoreList } = this.props
    return (
      <>
        {list.map(item => (
          <Link to={'/detail/' + item.get('id')} key={item.get('id')}>
            <ListItem>
              <img
                className="pic"
                src={item.get('imgUrl')}
                alt={item.get('title')}
              />
              <ListInfo>
                <h3 className="title">{item.get('title')}</h3>
                <p className="desc">{item.get('desc')}</p>
              </ListInfo>
            </ListItem>
          </Link>
        ))}
        <LoadMore onClick={() => getMoreList(page)}>加载更多</LoadMore>
      </>
    )
  }
}

const mapState = state => ({
  list: state.getIn(['home', 'articleList']),
  page: state.getIn(['home', 'articlePage'])
})
const mapDispatch = dispatch => ({
  getMoreList(page) {
    dispatch(actionCreators.getMoreList(page))
  }
})

export default connect(
  mapState,
  mapDispatch
)(List)
